import { FormProps, BasicColumn, FormSchema } from '@/components/Table';
import { getDictionaryList } from '@/api/system/dictionary';

export function getBasicColumns(): BasicColumn[] {
  return [
    {
      title: '接口分类',
      dataIndex: 'class_name',
    },
    {
      title: '接口名称',
      dataIndex: 'name',
      // width: 100,
      // filters: [
      //   { text: 'Male', value: 'male' },
      //   { text: 'Female', value: 'female' },
      // ],
    },
    {
      title: '请求方式',
      dataIndex: 'method',
      width: 100,
    },
    {
      title: '接口地址',
      dataIndex: 'url',
    },
    {
      title: '权限代码',
      dataIndex: 'perms_code',
    },
    {
      title: '描述',
      dataIndex: 'description',
      // width: 150,
      // sorter: true,
      // defaultHidden: true,
    },
    {
      title: '创建时间',
      width: 160,
      sorter: true,
      dataIndex: 'created_at',
    },
  ];
}

async function fetchInterfaceClass(name?: string) {
  const { items } = await getDictionaryList({ parent_id: 19, name: name });
  return items;
}

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    schemas: [
      // {
      //   field: `field11`,
      //   label: `Slot示例`,
      //   slot: 'custom',
      //   colProps: {
      //     xl: 12,
      //     xxl: 8,
      //   },
      // },
      {
        field: 'url',
        component: 'Input',
        componentProps: {
          placeholder: '接口名称/地址',
        },
        colProps: { span: 5 },
      },
      {
        field: 'class_id',
        component: 'ApiSelect',
        componentProps: {
          api: fetchInterfaceClass,
          placeholder: '接口分类',
          class: 'ml-1',
          // fieldNames: {
          //   label: 'name',
          //   value: 'id',
          // },
          labelField: 'name',
          valueField: 'id',
          showSearch: true,
          optionFilterProp: 'label',
        },
        colProps: { span: 4 },
      },
    ],
  };
}

export const formSchema: FormSchema[] = [
  {
    field: 'class_id',
    label: '分类',
    component: 'TreeSelect',
    componentProps: {
      fieldNames: {
        label: 'name',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'name',
    label: '接口名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'method',
    label: '请求方式',
    component: 'TreeSelect',
    componentProps: {
      fieldNames: {
        label: 'name',
        value: 'name',
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'url',
    label: '接口地址',
    component: 'Input',
    required: true,
  },
  {
    label: '权限代码',
    field: 'perms_code',
    component: 'Input',
  },
  {
    label: '接口描述',
    field: 'description',
    component: 'InputTextArea',
  },
];
